<template>
	<view class="msg-view">
		<scroll-view class="msg-view-p" show-scrollbar="false" scroll-y :scroll-top="PanelScrollTop">
			<view id="chatArea">
				<view class="chat-area-line" v-for="(item,index) in msgList">
					<!-- 系统消息 -->
					<view class="system-msg"  :style="{'flex-direction':((item.ct.length)<15?'row':'')}" v-if="item._method_ == 'SystemNot'">
						<view class="system-msg-detail " >
							<!-- <text class="system-msg-detail-username " v-for="i in item.userName" >{{i}}</text> -->
							<!-- <text class="system-msg-detail-content " v-for="i in ':'">{{i}}</text> -->
							<text class="system-msg-detail-content " v-for="i in item.ct">{{i}}</text>
						</view>
					</view>
					<!-- 用户消息 -->
					<view class="user-msg" :style="{'flex-direction':((item.uname.length + item.ct.length)<15?'row':'')}" v-else-if="item._method_ == 'SendMsg'">
						<view class="user-msg-detail">
							<!-- 等级图标 -->
							<view class="user-msg-detail-tag">
								<image :src="$api.levelimg(item.level)" mode=""></image>
							</view>
							<view class="user-msg-detail-tag" v-if="item.vip_type != 0">
								<image src="/static/image/room/yN.png" mode=""></image>
							</view>
							<text class="user-msg-detail-username" v-for="i in item.uname" @click="test(item.uname)">{{i}}</text>
							<text class="user-msg-detail-content" v-for="i in '：'">{{i}}</text>
							<text class="user-msg-detail-content" v-for="i in item.ct">{{i}}</text>
						</view>
					</view>
					<!-- 礼物 -->
					<view class="user-msg" :style="{'flex-direction':((item.uname.length + item.ct.length)<15?'row':'')}" v-else-if="item._method_ == 'SendGift'">
						<view class="user-msg-detail">
							<view class="user-msg-detail-tag">
								<!-- 这里可以根据用户等级显示图片 -->
								<image src="/static/image/room/yN.png" mode=""></image>
							</view>
							<text class="user-msg-detail-username" v-for="i in item.uname" @click="test(item.uname)">{{i}}</text>
							<text class="user-msg-detail-content">：</text>
							<text class="user-msg-detail-content red">送{{item.ct.giftcount}}个{{item.ct.giftname}}</text>
						</view>
					</view>
				</view>
				
			</view>
		</scroll-view>
		<!-- 进入直播间 -->
		<view class="user-msg" :style="{marginTop:'6rpx','flex-direction':'row'}" v-if="msgRoom.user_nicename">
			<view class="user-msg-detail" style="background-color: #b800f573;">
				
				<view class="user-msg-detail-tag">
					<!-- 这里可以根据用户等级显示图片 -->
					<image src="/static/image/room/yN.png" mode=""></image>
				</view>
				<text class="user-msg-detail-username" v-for="i in msgRoom.user_nicename" @click="test(msgRoom.user_nicename)">{{i}}</text>
				<text class="user-msg-detail-content" v-for="i in '：'">{{i}}</text>
				<text class="user-msg-detail-content" v-for="i in msgRoom.ct">{{i}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name:'MhMsgList',
		props: {
			msgList: {
				type: [Object,Array],
				default: [
					// {
					// userName: "系统通知",
					// content: "直播倡导绿色直播，严禁发布涉黄涉毒涉赌，严禁发布涉政、违法及低俗违规内容。健康直播，文明互动",
					// cmd: "say",
					// msg_type: "system"},
					]
			},
			msgRoom: {
				type: [Object,Array],
				default: []
			},
			msgPanelScrollTop: {
				type: [Number, String],
				default: 0
			}
		},
		data() {
			return {
				PanelScrollTop: 0,
			}
		},
		methods: {
			test(e){
				uni.showToast({
					title:e,
					icon:'none'
				})
			},
			setMsgPanelScroll() {
				var that = this;
				setTimeout(function() {
					const query = uni.createSelectorQuery().in(that);
					query.select('#chatArea').boundingClientRect(data => {
						that.PanelScrollTop = data.height - 200;
					}).exec();
				}, 50)

				
			},
		}

	}
</script>
<style lang="scss" scoped>
	.msg-view {
		position: absolute;
		bottom: 150rpx;
		left: 15px;
	}

	.msg-view-p {
		display: flex;
		width: 550rpx;
		// height: 450rpx;
		height: 540rpx;
		padding-bottom: 20rpx;

	}
	 
	.chat-area-line{
		width: 550upx;
		flex-direction: row;
		margin-bottom: 10upx;
	}
	.system-msg{
		width: 550upx;
		margin-bottom: 5upx;
	}
	.system-msg-detail {
		// max-width: 550upx;
		
		padding: 10upx;
		border-radius: 10upx;
		// background-color: rgba($color: #000000, $alpha: 0.4);
		background-color: #00000045;
		flex-direction: row;  
		flex-wrap: wrap;
		margin-right: 14upx;
	
		>.system-msg-detail-username {
			color: red;
			font-size: 30upx;
			font-weight: 400;
			line-height: 40upx;
			
		}
	
		>.system-msg-detail-content {
			font-size: 30upx;
			font-weight: 400;
			line-height: 40upx;
			color: #C089FF;
		}
	}
	.user-line{
		// max-width: 530upx;
		padding: 10upx;
		color: #FFFFFF;
		flex-direction: row;
		border-radius: 30upx;
		background-color: rgba($color: #000000, $alpha: 0.4);
		margin-right: 14upx;
		font-size: 28upx;
		font-weight: 400;
		line-height: 40upx;
	}
	.user-msg{
		// width: 530upx;
		width: fit-content;
		
		
		margin-bottom: 5upx;
	}
	.user-msg-detail {
		display: flex;
		padding: 10upx;
		border-radius: 10upx;
		// background-color: rgba($color: #000000, $alpha: 0.4);
		background-color: #00000045;
		flex-direction: row;  
		flex-wrap: wrap;
		margin-right: 14upx;
		align-items: center;
		>.user-msg-detail-tag{
			width: 70rpx;
			height: 34rpx;
			line-height: 28rpx;
			margin-right: 8rpx;
			image{
				width: 100%;
				height: 100%;
			}
			// color: #A0CFFF;
			// background-color: #53C21D;
			// width: 80upx;
			// height: 40upx;
			// border-radius: 20upx;
			// font-size: 30upx;
			// font-weight: 400;
			// line-height: 40upx;
		}
		>.user-msg-detail-username {
			color: #A0CFFF;
			font-size: 30upx;
			font-weight: 400;
			line-height: 40upx;
		}
	
		>.user-msg-detail-content {
			font-size: 30upx;
			font-weight: 400;
			line-height: 40upx;
			color: #fff;
		}
		>.red {
			color: #ff5f5f !important;
		}
	}
</style>
